<template>
    <div>
        <div class="index">
            <div class="w1">
                <div class="w1_1">
                    <span>消息中心</span>
                </div>
                <div class="w1_2" v-for="item,i in newsNa" :key="i" @click="Jump(i)" :style="{color: index === i ? '#00c3ff': ''}">
                    <i :class="item.Icon"></i>
                    <span>{{item.name}}</span>
                </div>
            </div>
            <div class="w2">
                <router-view />
            </div>
        </div>
    </div>
</template>

<script>
export default {
    data() {
        return {
            index: 0,
            newsNa: [
                {Icon: 'el-icon-s-custom', name: '回复我的'},
                {Icon: 'el-icon-s-custom', name: '主动@我'},
                {Icon: 'el-icon-s-custom', name: '系统通知'},
                {Icon: 'el-icon-s-custom', name: '收到的赞'},
                {Icon: 'el-icon-s-custom', name: '消息设置'},
            ]
        }
    },
    methods: {
        Jump(index) {
            this.index = index
            if(index === 0) {
                // 回复我的
                this.$router.push('/reply to my route')
            }else if(index === 1) {
                // Active @ me routing 主动@我
                this.$router.push('/active me routing')
            }else if(index === 2) {
                // System notification routing 系统通知
                this.$router.push('/system notification routing')
            }else if(index === 3) {
                // Route received 收到的赞
                this.$router.push('/route received')
            }else if(index === 4) {
                //消息设置
                this.$router.push('/message_settings')
            }
        }
    }
}
</script>

<style lang="less" scoped>
    .index {
        // border: 1px solid red;
        margin-top: 20px;
        display: flex;
        .w1 {
            // border-bottom: 1px solid #ccc;
            width: 200px;
            background-color: white;
            .w1_1 {
                border-bottom: 1px solid #ccc;
                padding: 6px;
                span {
                    font-size: 20px;
                }
            }
            .w1_2:hover {
                color: #00c3ff;
                cursor: pointer;
            }
            .w1_2:nth-last-child(2) {
                border-bottom: 1px solid #ccc;
            }
            .w1_2 {
                padding: 10px;
                color: rgb(95, 95, 95);
                i {
                    margin-left: 10px;
                }
                span {
                    margin-left: 10px;
                }
            }
        }
        .w2 {
            margin-left: 20px;
            width: 700px;
            background-color: white;
            // height: 800px;
        }
    }
</style>